<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>信息注册页面</title>
		<!--引入jquery库-->
		<script type="text/javascript" src="jquery-1.11.3/jquery-1.11.3.min.js" ></script>
		<script>
			/*
			 * 第一种解决方法： 
			 * 客户单表单验证的工作流程：
			 * 在点击提交按钮以后，发送表单数据到服务器之前进行表单验证；
			 * 表单验证函数需要有一个返回值用于阻止或允许表单数据是否可以发送到服务器端；
			 * 如果验证函数返回false：则会阻止表单数据的发送；
			 * 如果验证函数返回true：则会允许表单数据发送；
			 * 验证函数一般绑定给提交按钮的onclick事件；
			 * 
			 * 除此之外，第二种解决方法：
			 * 也可以函数内部使用js操作form控件的submit方法来决定是否发送表单数据，
			 * 这样要求提交按钮不能为submit类型；
			 */
			// 表单验证函数
			function checkMe() {
				// 验证结果  -- 默认是全部可以验证通过的
				var isOK = true;
				// 获取验证控件对象的内容
				// 验证非空用户名				
				//var txtname = document.getElementById("name").value;
				var txtname = $("#name").val();
				// 验证内容是否合法，并进行相关信息提示
				if(txtname == null || txtname == ""){
					// 验证不通过，提示错误信息
					//alert("请输入用户名");
					//document.getElementById("namemsg").innerHTML = "*请输入用户名";
					$("#namemsg").html("*请输入用户名");
					// 验证不通过，修改验证结果的变量，不允许提交表单
					isOK = false;
				}else{
					// 验证通过，剔除提示信息
					//document.getElementById("namemsg").innerHTML = "";
					$("#namemsg").html("");
				}
				
				// 验证非空密码			
				var txtpassword = document.getElementById("password").value;
				// 验证内容是否合法，并进行相关信息提示
				if(txtpassword == null || txtpassword == ""){
					// 验证不通过，提示错误信息
					document.getElementById("passwordmsg").innerHTML = "*请输入密码";
					// 验证不通过，修改验证结果的变量，不允许提交表单
					isOK = false;
				}else{
					// 验证通过，剔除提示信息
					document.getElementById("passwordmsg").innerHTML = "";
				}
				
				// 验证非空邮箱			
				var txtemail = document.getElementById("email").value;
				// 验证邮箱合法性的正则表达式
				var regEmail = /^\w+@\w+.[A-Za-z]{2,3}(.[A-Za-z]{2,3})?$/;
				// 验证内容是否合法，并进行相关信息提示
				if(txtemail == null || txtemail == ""){
					// 验证不通过，提示错误信息
					document.getElementById("emailmsg").innerHTML = "*请输入邮箱";
					// 验证不通过，修改验证结果的变量，不允许提交表单
					isOK = false;
				}else if(regEmail.test(txtemail) == false){					
					// 使用正则表达式
					// 验证邮箱的合法性
					document.getElementById("emailmsg").innerHTML = "*输入邮箱格式非法";
					// 验证不通过，修改验证结果的变量，不允许提交表单
					isOK = false;
				}else{
					// 验证通过，剔除提示信息
					document.getElementById("emailmsg").innerHTML = "";
				}
				
				// 验证性别是不是选中了
				var radiosexCount = $("#rsex>input:checked").length;
				if(radiosexCount == 0){
					// 验证不通过，提示错误信息
					$("#sexmsg").html("*请选择性别");
					// 验证不通过，修改验证结果的变量，不允许提交表单
					isOK = false;
				}else{
					// 验证通过，剔除提示信息
					$("#sexmsg").html("");
				}
				
				// 验证出生年月下来选择框
				// 年份验证
				var selectbirth_year = document.getElementById("birth_year").value;
				// 月份验证
				var selectbirth_moth = document.getElementById("birth_month").value;
				// 验证内容是否合法，并进行相关信息提示
				if(selectbirth_year == null || selectbirth_year == ""
				   || selectbirth_moth == null || selectbirth_moth == ""){
					// 验证不通过，提示错误信息
					document.getElementById("birthmsg").innerHTML = "*请选择出生年月";
					// 验证不通过，修改验证结果的变量，不允许提交表单
					isOK = false;
				}else{
					// 验证通过，剔除提示信息
					document.getElementById("birthmsg").innerHTML = "";
				}
				
				// 验证兴趣多选框
				var chhobbysCount = $("#hobbys>input:checked").length;
				if(chhobbysCount == 0){
					// 验证不通过，提示错误信息
					$("#hobbymsg").html("*请至少选择一项兴趣");
					// 验证不通过，修改验证结果的变量，不允许提交表单
					isOK = false;
				}else{
					// 验证通过，剔除提示信息
					$("#hobbymsg").html("");
				}
								
				// 上传文件验证
				var txtfileimage = document.getElementById("fileimage").value;
				// 验证内容是否合法，并进行相关信息提示
				if(txtfileimage == null || txtfileimage == ""){
					// 验证不通过，提示错误信息
					document.getElementById("fileimagemsg").innerHTML = "*请选择上传图像文件";
					// 验证不通过，修改验证结果的变量，不允许提交表单
					isOK = false;
				}else{
					// 验证通过，剔除提示信息
					document.getElementById("fileimagemsg").innerHTML = "";
				}
				
				// 返回验证结果变量
				return isOK;
				
			}
		</script>

	</head>

	<body>
		<table align="center" width="50%">
			<tr>
				<td>&nbsp;&nbsp;&nbsp;&nbsp;<b>填写用户注册信息</b></td>
			</tr>
		</table>
		<form id="form1" action="#" method="get">
			<table align="center" width="50%" border="1" cellspacing="0">
				<tr>
					<td width="20%" class="right">用户名:</td>
					<td width="36%" align="center">
						<input style="width: 98%;" type="text" name="name" id="name" maxlength="12" size="22">
					</td>
					<td width="44%" class="indent"><font color="red" id="namemsg"></font></td>
				</tr>
				<tr>
					<td class="right">密码:</td>
					<td>
						<input type="password" name="password" id="password" maxlength="16" size="22">
					</td>
					<td class="indent"><font color="red" id="passwordmsg"></font></td>
				</tr>
				<tr>
					<td class="right">注册邮箱:</td>
					<td>
						<input type="text" name="email" id="email" maxlength="16" size="22">
					</td>
					<td class="indent"><font color="red" id="emailmsg"></font></td>
				</tr>
				<tr>
					<td class="right" >性别:</td>
					<td id="rsex">
						<input type="radio" name="sex" id="sex1" value="man">男
						<input type="radio" name="sex" id="sex2" value="woman">女
					</td>
					<td class="indent"><font color="red" id="sexmsg"></font></td>
				</tr>
				<tr>
					<td class="right">出生年月:</td>
					<td>
						<select name="birth_year" id="birth_year">
							<option value="" selected></option>
							<option value="year">2012</option>
							<option value="year">2011</option>
							<option value="year">2010</option>
							<option value="year">2009</option>
							<option value="year">2008</option>
							<option value="year">2007</option>
							<option value="year">2006</option>
							<option value="year">2005</option>
							<option value="year">2004</option>
							<option value="year">2003</option>
							<option value="year">2002</option>
							<option value="year">2001</option>
							<option value="year">2000</option>
							<option value="year">1999</option>
							<option value="year">1998</option>
							<option value="year">1997</option>
							<option value="year">1996</option>
						</select>年
						<select name="birth_month" id="birth_month">
							<option value="" selected></option>
							<option value="month">12</option>
							<option value="month">11</option>
							<option value="month">10</option>
							<option value="month">09</option>
							<option value="month">08</option>
							<option value="month">07</option>
							<option value="month">06</option>
							<option value="month">05</option>
							<option value="month">04</option>
							<option value="month">03</option>
							<option value="month">02</option>
							<option value="month">01</option>
						</select>月
					</td>
					<td class="indent"><font color="red" id="birthmsg"></font></td>
				</tr>
				<tr>
					<td class="right">兴趣标签:</td>
					<td id="hobbys">
						<input type="checkbox" name="hobby" id="hobby1" value="1">生活
						<input type="checkbox" name="hobby" id="hobby2" value="2">娱乐
						<input type="checkbox" name="hobby" id="hobby3" value="3">体育<br>
						<input type="checkbox" name="hobby" id="hobby4" value="4">财经
						<input type="checkbox" name="hobby" id="hobby5" value="5">时尚
						<input type="checkbox" name="hobby" id="hobby6" value="6">新闻
					</td>
					<td class="indent"><font color="red" id="hobbymsg"></font></td>
				</tr>
				<tr>
					<td class="right">头像:</td>
					<td>
						<input type="file" name="fileimage" id="fileimage" size="11">
					</td>
					<td class="indent"><font color="red" id="fileimagemsg"></font></td>
				</tr>
				<tr>
					<td class="right">个人简介:</td>
					<td>
						<textarea name="message" id="message" rows="5" wrap="hard"></textarea>
					</td>
					<td class="indent">选填：请添加您的个人简介情况,<br>&nbsp;&nbsp;以便让朋友们更了解您</td>
				</tr>
			</table>
			<table align="center" width="50%">
				<tr>
					<td align="center"><input type="submit" value="免费注册" onclick="return checkMe();"></td>
					<td align="center"><input type="reset" value="重新填写"></td>
				</tr>
			</table>
		</form>

	</body>

</html>